<template>
    <el-dialog
        :close-on-click-modal="false"
        :show-close="false"
        :title="isAdd?'新增分类':'修改分类'"
        :visible.sync="isEdit"
    >
        <el-form
            :rules="rules"
            ref="ruleForm"
            :model="form"
            label-width="120px"
            size="small"
            class="form-box"
        >
            <el-form-item label="分类名称" prop="name">
                <el-input type="text" v-model="form.name" placeholder="请输入分类名称"></el-input>
            </el-form-item>
            <el-form-item label="图片">
                <uploadImg @bindSendImg="propImg" :imgUrl="form.img"></uploadImg>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-switch v-model="state"></el-switch>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="text" v-model="form.desc" placeholder="请输入分类描述"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="$emit('closeDialog')" size="small">取消</el-button>
            <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
        </span>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import goodsApi from "@/api/goods";
import uploadImg from "@/components/uploadImg/index.vue";
@Component({
    components: { uploadImg },
})
export default class kindEditDialog extends Vue {
    // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
    check: boolean = true; //防重复提交
    check1: boolean = true; //防重复提交
    @Prop(Boolean) isEdit!: boolean;
    @Prop(Boolean) isAdd!: boolean;
    @Prop(Boolean) isState!: boolean;
    @Provide() state: boolean = true;
    @Prop() formData1: any;
    @Prop(Object) form!: {
        id: number;
        name: string;
        desc: string;
        order: string;
        img: string;
        status: number;
        pid: number;
    };
    @Provide() rules: any = {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
    };
    // 上传图片子组件传递过来的图片路径
    propImg(imgPath: any) {
        this.form.img = imgPath;
    }
    // 提交
    submitFormAdd(formName: any) {
        (this.$refs[formName] as any).validate((valid: boolean) => {
            if (valid) {
                if (this.state == true) {
                    this.form.status = 1;
                } else {
                    this.form.status = 0;
                }
                if (this.form.pid == 0) {
                    this.formData1.forEach((val: any) => {
                        console.log(val.name,this.form.name)
                        if(val.id!=this.form.id) {
                            if (val.name == this.form.name) {
                                this.check1 = false;
                            }
                        }
                        
                    });
                } else {
                    this.Judgethename(this.formData1, this.form.name, this.form.id);
                }
                if (this.check1) {
                    if (this.check) {
                        let _this = this;
                        _this.check = false;
                        goodsApi.saveKind(this.form).then((res: any) => {
                            if (res.data.status) {
                                _this.$message({
                                    message: "操作成功",
                                    type: "success",
                                });
                                _this.$emit("closeDialog");
                                _this.$emit("loadData");
                                setTimeout(function () {
                                    _this.check = true;
                                }, 1500);
                            } else {
                                _this.$message({
                                    message: res.data.msg,
                                    type: "error",
                                });
                                _this.check = true;
                            }
                        });
                    }
                } else {
                    this.$message({
                        message: "分类名称相同的，请更改",
                        type: "error",
                    });
                }
            }
        });
    }
    Judgethename(data, name,id) {
        if(!data){
          return []
        }
        for (let i = 0; i < data.length; i++) {
            if (data[i].name !== name) {
                if (data[i].children !== undefined) {
                    this.check1 = true;
                    this.Judgethename(data[i].children, this.form.name,this.form.id);
                }else {
                    this.check1 = true;
                }
            } else {
                this.check1 = false;
                if(data[i].id == id) {
                    if(data[i].name ==name ) {
                        this.check1 = true;
                    }
                }
                break;
            }
            
        }
    }
    created() {
        this.state = this.isState;
    }
}
</script>

<style lang="scss" scoped>
.form-box {
    .el-input,
    .el-select {
        width: 200px !important;
    }
}
</style>
